/* eslint-disable */
import React, {useEffect, useState} from 'react';
import {Table, Select} from 'antd';
import '../../css/myStyle.css';
import {Link} from 'react-router-dom'

const ProjectDetailTable = (newData: any) => {

  const [data, setData] = useState([]);

  // 初始化数据
  useEffect(() => {
    if (!newData.newData.projectDetail) {
      setData([])
    } else {
      setData(newData.newData.projectDetail[0])
      console.log("projectDetail:", newData.newData.projectDetail[0])
    }
  }, [newData]);

  const getRowStyle = (task: any) => ({
    // color: task === '不执行' ? '#ccc' : undefined,
    // backgroundColor: task === '不执行' ? '#f5f5f5' : undefined,
  });

  const taskOptions = [
    {value: '执行', label: '执行'},
    {value: '不执行', label: '不执行'},
  ];

  // 获取当前行相应style
  const getRowClassname = (task: any) => (task === '不执行' ? 'gray-row' : '');

  // 更改执行状态
  const handleTaskChange = (recordKey: any, value: any, dataSource = data) => {
    setData((prevState: any) => {
      return prevState.map((item: any) => {
        if (item.key === recordKey) {
          return {...item, task: value};
        } else if (Array.isArray(item.description)) {
          return {
            ...item,
            description: item.description.map((subItem: any) => {
              if (subItem.key === recordKey) {
                return {...subItem, task: value};
              }
              return subItem;
            }),
          };
        }
        return item;
      });
    });
  };

  // 主表格列配置（修改task列以包含Select）
  const mainColumns = [
    {
      title: '项目全称',
      dataIndex: 'name',
      key: 'name',
      width: '30%',
      render: (text: any, record: any) => (
        <div style={getRowStyle(record.task)}>
          {text}
        </div>
      ),
    },
    {
      title: '是否执行监盘',
      dataIndex: 'task',
      key: 'task',
      width: '10%',
      render: (text: any, record: any, dataIndex: any, setDataSource: any) => (
        <Select
          value={text}
          style={{minWidth: 100}}
          options={taskOptions}
          onChange={(value) => handleTaskChange(record.key, value, setDataSource)}
        />
      ),
    },
    {
      title: '不执行监盘的原因',
      dataIndex: 'age',
      key: 'age',
      width: '20%',
      render: (text: any, record: any) => (
        <div style={getRowStyle(record.task)}>
          {text}
        </div>
      ),
    },
    {
      title: '监盘进度',
      dataIndex: 'address',
      key: 'address',
      width: '25%',
      render: (text: any, record: any) => (record.task === '不执行' ? '-' : text),
    },
    {
      title: '操作',
      dataIndex: 'option',
      key: 'x',
      render: (text: any, record: any) => (
        <span>
          {record.task === '不执行' ? '-' : (
            <Link to={`/warehouseInformation?singleId=${record.key}`}>按单体进入</Link>
          )}
        </span>
      ),
      width: '15%',
    },
  ];

  // 子表格列配置（去除表头样式并保持与主表格列对齐，并添加根据 task 状态设置行样式的方法）
  const subColumns = mainColumns.map((column) => ({
    ...column,
    ellipsis: true,
    render: (text: any, subRecord: any) => (
      column.dataIndex === 'address' || column.dataIndex === 'option'
        ? (subRecord.task === '不执行' ? '-' : typeof column.render === 'function' ? column.render(text, subRecord) : text)
        : typeof column.render === 'function' ? column.render(text, subRecord) : text
    ),
  }));

  const EnhancedTableColumns = [...mainColumns];
  // @ts-ignore
  EnhancedTableColumns[1].render = (text, record) => (
    <Select
      value={text}
      style={{minWidth: 100}}
      options={taskOptions}
      onChange={(value) => handleTaskChange(record.key, value)}
    />
  );

  // 子表格组件
  // @ts-ignore
  const EnhancedExpandedRowComponent = ({record, updateTask}) => {
    const subColumnsWithRender = subColumns.map((column) => ({
      ...column,
      render: column.dataIndex === 'task'
        ? (text: any, subRecord: any) => (
          <Select
            value={text}
            style={{minWidth: 100}}
            options={taskOptions}
            onChange={(value) => updateTask(subRecord.key, value, record.description)}
          />
        )
        : column.render,
    }));

    return (
      <Table
        bordered
        columns={subColumnsWithRender}
        dataSource={record.description}
        pagination={false}
        showHeader={false}
        style={{marginLeft: 0}}
        rowClassName={(subRecord) => getRowClassname(subRecord.task)}
      />
    );
  };

  return (
    <React.Fragment>
      <Table
        bordered
        rowClassName={(record) => getRowClassname(record.task)}
        // 绑定子表组件
        expandable={{
          expandedRowRender: (record) => (
            <EnhancedExpandedRowComponent record={record} updateTask={handleTaskChange}/>),
          rowExpandable: (record) => Array.isArray(record.description) && record.description.length > 0,
        }}
        columns={EnhancedTableColumns}
        dataSource={data}
      />
    </React.Fragment>
  );
};

export default ProjectDetailTable;

// export { showProjectDetail, closeProjectDetail };
